<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <div v-if="cla == '2218'">真帅真漂亮</div>
        <!-- 中间不能有多余标签 -->
        <!-- <span></span> -->
        <div v-else-if="cla == '2217'">真一般</div>
        <div v-else>真水</div>


        <button @click="isShow = !isShow">切换 isShow</button>

        <!-- <div v-if="isShow">
            <h1>这是h1</h1>
            <h2>这是h2</h2>
            <h3>这是h3</h3>
            <h4>这是h4</h4>
            <h5>这是h5</h5>
            <h6>这是h6</h6>
        </div> -->

        <!-- template 是一个空标签，不会被渲染出来 -->
        <!-- 如果需要多标签同时显示隐藏，可以使用 template 包裹 -->
        <template v-if="isShow">
            <h1>这是h1</h1>
            <h2>这是h2</h2>
            <h3>这是h3</h3>
            <h4>这是h4</h4>
            <h5>这是h5</h5>
            <h6>这是h6</h6>
        </template>
        <hr>

        <!-- v-show 也可以将标签显示或者隐藏，通过 display: none; 实现 -->
        <!-- 
            v-if: 
            通过添加或者移除元素进行显示隐藏
            惰性，默认条件不成立的时候，不会渲染
            不频繁切换显示的时候可以使用 v-if

            v-show:
            通过修改样式实现显示隐藏
            非惰性，不管你条件是否成立，该元素都会被渲染
            频繁的显示隐藏的时候可以使用 v-show 性能更好
            
         -->
        <h1 v-show="isShow">你好中国</h1>

        <!-- 因为 template 不会被渲染，所以不能在上面使用 v-show  -->
        <!-- <template v-show="isShow">
            <h1>这是h1</h1>
            <h2>这是h2</h2>
            <h3>这是h3</h3>
            <h4>这是h4</h4>
            <h5>这是h5</h5>
            <h6>这是h6</h6>
        </template> -->

    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                cla: '2218',
                isShow: false
            }
        },
    })
    app.mount('#app')
</script>

</html>